// Radio

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin radio {
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    white-space: nowrap;
    height: $--x-radio-height;
    line-height: $--x-radio-height;
    position: relative;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  &-row {
    flex: 1;
    //display: flex;
    align-items: center;
    position: relative;
    //height: $--x-radio-height;
    line-height: $--x-radio-height;
  }
  &-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    outline: none;
    margin-right: 0.875rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: var(--x-primary);
      .#{$--x-radio-prefix}-box {
        border-color: var(--x-primary);
      }
    }
    &:last-child {
      margin-right: 0;
    }
    &.x-checked {
      .#{$--x-radio-prefix}-box {
        border-color: var(--x-primary);
        &::after {
          transform: scale(1);
          opacity: 1;
        }
      }
    }
    &.x-disabled {
      @include disabled();
    }
  }
  &-box {
    border: 0.0625rem solid var(--x-border);
    border-radius: 100%;
    width: 1rem;
    height: 1rem;
    background-color: $--x-background-a100;
    position: relative;
    box-sizing: border-box;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    &:hover {
      border-color: var(--x-primary);
    }
    &::after {
      position: absolute;
      display: inline-block;
      width: 0.5rem;
      height: 0.5rem;
      background-color: var(--x-primary);
      border-radius: 1rem;
      transform: scale(0);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      content: ' ';
    }
  }
  &-label {
    margin-left: 0.325rem;
  }
  &.x-disabled {
    .#{$--x-radio-prefix}-item {
      @include disabled();
    }
  }
  &.x-invalid,
  &.x-required {
    > label {
      color: $--x-danger;
    }
  }
  &.x-direction {
    &-row {
      > label {
        padding: 0 0.5rem 0 0;
      }
    }
    &-row-reverse {
      > label {
        padding: 0 0 0 0.5rem;
      }
    }
    &-column {
      align-items: inherit;
    }
    &-column-reverse {
      align-items: inherit;
    }
  }
}

@mixin disabled {
  color: var(--x-text-400);
  cursor: not-allowed;
  .#{$--x-radio-prefix}-box {
    border-color: var(--x-border-100);
    background-color: var(--x-border-300);
    &::after {
      background-color: var(--x-text-400);
    }
  }
}
